<template>
  <div class="collect-article">
    <van-icon
      :name="value ? 'star' : 'star-o'"
      :color="value ? '#ffa500' : ''"
      :loading="loading"
      @click="onCollect"
    />
  </div>
</template>
<script>
import { cancelCollectArt, collectArt } from '@/api/article';
export default {
  name: 'CollectArt',
  components: {},
  props: {
    value: {
      typeof: Boolean,
      require: true
    },
    ArtId: {
      typeof: Number,
      require: true
    }
  },
  data () {
    return {
      loading: false
    };
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    async onCollect () {
      this.loading = true;
      try {
        if (this.value) {
          await cancelCollectArt(this.ArtId);
          this.$toast.success('取消收藏成功！');
        } else {
          await collectArt(this.ArtId);
          this.$toast.success('收藏成功！');
        }
        this.$emit('input', !this.value);
      } catch (error) {
        this.$toast('操作失败，请稍后重试');
      }
      this.loading = false;
    }
  }
};
</script>
<style scoped lang='less'>
</style>
